<template>
  <div class="overview-root runningAnalysis-root">
    <div class="box">
      <targetSummary :yearOptions ="yearOptions" :areaOptions="areaOptions" />
      <indicatorDiagnosticInfo :yearOptions ="yearOptions" :areaOptions="areaOptions"
                               :oneTargetOptionsMap="oneTargetOptionsMap"/>
    </div>
    <div class="box">
      <cityCompareAnalysis :yearOptions ="yearOptions"
                           :oneTargetOptionsMap="oneTargetOptionsMap"/>
    </div>
     <el-divider></el-divider>
    <!-- <div class="box">
      <indicatorDiagnosticInfo :yearOptions ="yearOptions" :areaOptions="areaOptions" :oneTargetOptions="oneTargetOptionsSub"/>
    </div> -->
    <div class="box">
      <cityDetail :areaOptions="areaOptions" :oneTargetOptions="oneTargetOptions"/>
    </div>

    <div class="box">
      <urbanDiagnosticInfo :yearOptions ="yearOptions" :areaOptions="areaOptions"></urbanDiagnosticInfo>
    </div>
    <el-divider></el-divider>
    <div class="box">
     <publicProblem :yearOptions ="yearOptions"/>
    </div>
    <div class="box">
      <spaceAnalysis :yearOptions ="yearOptions" :areaOptions="areaOptions" />
    </div>
  </div>
</template>

<script>
  import dayjs from "dayjs"
  import {listWithPlaceType} from "@/api/system/area"
  import cityCompareAnalysis from './components/cityCompareAnalysis.vue';
  import targetSummary from './components/targetSummary.vue'
  import indicatorDiagnosticInfo from './components/indicatorDiagnosticInfo.vue'
  import cityDetail from './components/cityDetail.vue'
  import urbanDiagnosticInfo from './components/urbanDiagnosticInfo.vue'
  import publicProblem from './components/publicProblem.vue'
  import spaceAnalysis from './components/spaceAnalysis.vue'
  import { overviewOneTargetSelect } from "@/api/risk/cityWaringResult"
  export default {
    name: "overview",
    components: {
      cityCompareAnalysis, targetSummary, indicatorDiagnosticInfo,
      cityDetail,urbanDiagnosticInfo,publicProblem,spaceAnalysis
    },
    data() {
      return {
        areaOptions:[],
        oneTargetOptions: [],
        yearOptions:[0, 1, 2].map(t=>{
          let year = dayjs().subtract(t, "year").format("YYYY")
          return {id:year, label:year, value: year}
        }),
        oneTargetOptionsMap:{}
      }
    },
    methods: {
      getCityCodeList(){
        listWithPlaceType({leftAreaCode:44,placeType:"02"}).then(res=>{
          if(res.code==200){
            let areaList =  res.data.map(t=>{
              return {id: t.areaCode, label:t.areaName, value:t.areaCode}
            })
            areaList.unshift({id:"全部", label:"全部", value:""})
           this.areaOptions = areaList;
          }
        })
      },
      getSelectData(){
         let yearList =  [0, 1, 2].map(t=> dayjs().subtract(t, "year").format("YYYY")).join(",")
        overviewOneTargetSelect({yearList, yearList}).then(res=>{
            if(res.code==200){
              this.oneTargetOptionsMap = res.data
            }
        })
      }
    },
    mounted() {
      this.getSelectData()
      this.getCityCodeList()
    },
  }
</script>

<style lang="scss" scoped>
  .overview-root {
    display: flex;
    flex-wrap: wrap;
    background-color: white;
    .box {
      width: 50%;
      padding: 8px 12px;
      margin-bottom: 20px;
    }
  }

  ::v-deep .formTitle-root {
    margin-bottom: 10px;
  }
</style>
